<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>Documentos aplicante</title>

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/gen-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/mkv/jquery-ui.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/ui.jqgrid.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/makovo-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/upload.css" type="text/css" />

<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-2.1.3.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/gen.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery.ajaxfileupload.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/spin.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/pdfobject_source.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var mCall = new Gen.AjaxCall();

		$('#pdf-document').dialog({
			autoOpen : false,
			modal : true,
			width : 900,
			height : 770,
			open : function(event, ui) {

			},
			close : function(event, ui) {
			}
		});

		$('#error-mod').dialog({
			autoOpen : false,
			modal : true,
			width : 500,
			height : 300,
			open : function(event, ui) {

			},
			close : function(event, ui) {
			}
		});

		$('#test').click(function() {
			new Gen.AjaxCall().get('ApplicantInfo', {
				m : "appInfo"
			}, function(a) {
				$('#ap-curp').text(a.curp);
				$('#ap-name').text(a.name);
				$('#ap-address').text(a.address);
				$('#ap-phone').text(a.phone);

				for (var i = 0; i < a.docs.length; i++) {
					$('#' + a.docs[i].identifier).removeClass('error');
					$('#' + a.docs[i].identifier).find('.item-error').hide();
					$('#' + a.docs[i].identifier).attr('path', a.docs[i].path);

				}

				hideOverlay();
			}, function(er) {

			});
		});

		$('.pdf-item').click(function() {
			if ($(this).attr('path') != "")
				showPDF($(this).attr('path'));
			else {

				$('#error-text').html("El documento no puede ser encontrado. <br>Por favor considere larecarga.");
				$('#error-mod').dialog('open');
			}
		});

		$('input[type="file"]').ajaxfileupload({
			action : 'UploadFile',
			onStart : function() {
				showOverlay(true)
			},
			onComplete : function(r) {
				hideOverlay();
				if ($(r).html() != "")
					if (JSON.parse($(r).html())['remote-file'] != null) {
						getAplicantInfo();
					} else {
						$('#error-text').html("Error al subir archivo");
						$('#error-mod').dialog('open');
					}
				else {
					$('#error-text').html("Error al subir archivo");
					$('#error-mod').dialog('open');
				}

			}
		});

		$('#finish').click(function() {
			finishProcess("");
		});

		function getAplicantInfo() {
			mCall.get('GetApplicantFiles', {
				m : "appInfo"
			}, function(a) {
				$('#ap-curp').text(a.curp);
				$('#ap-name').text(a.name);
				$('#ap-address').text(a.address);
				$('#ap-phone').text(a.phone);

				for (var i = 0; i < a.docs.length; i++) {
					$('#' + a.docs[i].identifier).removeClass('error');
					$('#' + a.docs[i].identifier).find('.item-error').hide();
					$('#' + a.docs[i].identifier).attr('path', a.docs[i].path);

				}

				hideOverlay();
			}, function(er) {

			});
		}

		function finishProcess(user) {
			new Gen.AjaxCall().post('Documents', {
				m : "appInfo"
			}, function(a) {
				if (a != null)
					window.location = a.redirect;
			}, function(er) {

			});
		}

		function showPDF(u) {
			mPDF = new PDFObject({
				url : u,
				height : 700
			}).embed('pdf-viewer');

			$('#pdf-document').dialog('open');
		}

		showOverlay(true);
		getAplicantInfo();
	});
</script>
</head>
<body>
	<div style="width: 1100px; margin: 0 auto">
		<div class="headerMK">
			<div class="logo">
				<span
					style="float: left; position: absolute; left: 120px; font-size: 1em !important; top: 20px;">MAKOVO</span>
			</div>
		</div>
		<div class="divContenido">
			<a href="<%=request.getContextPath()%>/paginas/menu.jsp">Regresar
				al menú</a> <br />
			<div style="width: 700px; margin: 0px auto">
				<h3>Subir documentación</h3>

				<h4>Usuario</h4>
				<div>
					<table>
						<tr>
							<td>CURP:</td>
							<td><span id="ap-curp"></span></td>
						</tr>
						<tr>
							<td>Nombre:</td>
							<td><span id="ap-name"></span></td>
						</tr>
						<tr>
							<td>Dirección:</td>
							<td><span id="ap-address"></span></td>
						</tr>
						<tr>
							<td>Teléfono:</td>
							<td><span id="ap-phone"></span></td>
						</tr>
					</table>
				</div>
				<div>
					<table style="border-spacing: 1em; border-collapse: separate;">
						<!-- 					<tr> -->
						<!-- 						<td colspan="4"><p>Documentación personal</p></td> -->
						<!-- 					</tr> -->
						<tr>
							<td>CURP<br /> <input type="file" name="curp" /></td>
							<td>Identificación<br /> <input type="file" name="ide" /></td>
							<td>Acta de nacimiento<br /> <input type="file" name="nac" /></td>
						</tr>
						<tr>
							<td>
								<div class="pdf-item error" id="curp" path="">
									<div class="title">CURP</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>

							</td>
							<td>
								<div class="pdf-item error" id="ide" path="">
									<div class="title">Identificación</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>
							</td>
							<td>
								<div class="pdf-item error" id="nac" path="">
									<div class="title">Acta de nacimiento</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Acta de matrimonio<br /> <input type="file" name="mat" /></td>
						</tr>
						<tr>
							<td>
								<div class="pdf-item error" id="mat" path="">
									<div class="title">Acta de matrimonio</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>
							</td>
						</tr>
						<!-- 					<tr> -->
						<!-- 						<td colspan="4"><p>Documentación personal</p></td> -->
						<!-- 					</tr> -->
						<tr>
							<td>Comprobante de Ingreso<br /> <input type="file"
								name="ing" /></td>
							<td>Comprobante de Domicilio<br /> <input type="file"
								name="dom" /></td>
							<td>Constancia de escrituras<br /> <input type="file"
								name="esc" /></td>
						</tr>
						<tr>
							<td>
								<div class="pdf-item error" id="ing" path="">
									<div class="title">Comprobante de Ingreso</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>

							</td>
							<td>
								<div class="pdf-item error" id="dom" path="">
									<div class="title">Comprobante de Domicilio</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>
							</td>
							<td>
								<div class="pdf-item error" id="esc" path="">
									<div class="title">Constancia de escrituras</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Cédula de información socioeconónica<br /> <input type="file" name="ise" /></td>
						</tr>
						<tr>
							<td>
								<div class="pdf-item error" id="ise" path="">
									<div class="title">Cédula de información socioeconónica</div>
									<div class="item-error">Documento no disponible</div>
									<div class="type-item">PDF</div>
								</div>
							</td>
						</tr>
					</table>

				</div>
			</div>

			<button id="finish" type="button" class="t-btn medium change">Terminar
				proceso</button>
		</div>
		<div id="pdf-document">
			<div id="pdf-viewer"></div>
		</div>

		<div id="error-mod">
			<div id="error-text" style="color: rgba(180, 0, 0, .8)"></div>
		</div>
	</div>
</body>
</html>